<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!--v-if是删除节点 使用注释节点做占位符 <!--v-if--> -->
			<div id="">
				<div id="">
					<p v-if="linkIndex===0">
						<a :href="urls[0]">淘宝</a>
					</p>
					<p v-else-if="linkIndex ==1">
						<a :href="urls[1]">tmall</a>
					</p>
					<p v-else>
						<a :href="urls[2]">京东</a>
					</p>
				</div>
				<div id="">
					<button type="button" @click="chengIndex(0)">淘宝</button>
					<button type="button" @click="chengIndex(1)">天猫</button>
					<button type="button" @click="chengIndex(2)">京东</button>
				</div>
			</div>
			
			<!-- v-show是隐藏节点，display：none -->
			<div id="">
				<div id="">
					<p v-show="linkIndex===0">
						<a :href="urls[0]">淘宝</a>
					</p>
					<p v-show="linkIndex ==1">
						<a :href="urls[1]">tmall</a>
					</p>
					<p v-show="linkIndex ==2">
						<a :href="urls[2]">京东</a>
					</p>
				</div>
				<div id="">
					<button type="button" @click="chengIndex(0)">淘宝</button>
					<button type="button" @click="chengIndex(1)">天猫</button>
					<button type="button" @click="chengIndex(2)">京东</button>
				</div>
			</div>
			<!-- v-bind 参数
				 v-on   事件名  绑定事件处理函数。
				 动态属性名参数不能出现空格和引号，HTML的合法属性名不能出现空格和引号
				  动态绑定可以通过:[aAtrr]='*'   @[eventName]='*'
				  :[null]='*' null作为属性是无效的，但是可以通过null解除属性绑定
				  插值表达式的受限列表
				  -->
			<div id="">
				<div id="">
					<p v-show="linkIndex===0">
						<a :[aAtrr]="urls[0]">淘宝</a>
					</p>
					<p v-show="linkIndex ==1">
						<a :[aAtrr]="urls[1]">tmall</a>
					</p>
					<p v-show="linkIndex ==2">
						<a :[aAtrr]="urls[2]">京东</a>
					</p>
				</div>
				<div id="">
					<button type="button" @[eventName]="chengIndex(0)">淘宝</button>
					<button type="button" @[eventName]="chengIndex(1)">天猫</button>
					<button type="button" @[eventName]="chengIndex(2)">京东</button>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:app,
				data:{
					eventname:'click',
					aatrr:'href',
					linkIndex:0,
					urls:[
						'https:www.taobao.com',
						'https:www.tmall.com',
						'https:www.jd.com',
					],
					
				},
				methods:{
				chengIndex(index){
					this.linkIndex=index;
				}	
				}
			})
		</script>
	</body>
</html>
